<template>
  <div class="container">
    <h1>hello world</h1>
    <h1>请求次数：{{count}}</h1>
    <h1>pingList：{{pingList}}</h1>
    <h1>ping：{{ping}}ms</h1>
    <h1>抖动：{{jitter}}ms</h1>
    <h1>ping 的全部记录：{{list}}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      pingList: [],
      jitter: 0,
      ping: 0,
      list: []
    }
  },
  methods: {
    test() {
      setInterval(() => {
        const img = new Image()
        const start = new Date().getTime()
        img.src = `https://baidu.com/favicon.ico?d=${start}`
        img.onload = () => {
          const end = new Date().getTime()
          this.ping = end - start
          this.pingList.push(this.ping)
          if ((this.count + 1) % 5 === 0) {
            const maxPing = Math.max(...this.pingList)
            const minPing = Math.min(...this.pingList)
            this.jitter = maxPing - minPing
            this.list.push(this.pingList)
            this.pingList = []
          }
          this.count++
        }
        img.onerror = () => {
          console.error('图片请求失败');
        }
      }, 3000)
    }
  },
  mounted() {
    this.test()
  }
}
</script>
